<template>
    <div id="app">
      <div class="container">
        <button @click="handleAdd1">添加：点击后重新获取数据</button>
        <user-comment1
          :comments="comments1"
        ></user-comment1>
      </div>
    </div>
  </template>
  
  <script>
  import UserComment1 from "./components/UserComment1.vue";
  export default {
    components: {
      UserComment1,
    },
    data() {
      return {
        comments1: [],
      };
    },
    methods: {
      handleAdd1() {
        // this.comments1 = [{ name: "张三", content: "评论1" }];

        // 会触发子组件重新渲染
        this.comments1.push({ name: "李四", content: "评论2" });
      },
    },
  };
  </script>
  
  <style>
  #app {
    width: 800px;
    margin: 0 auto;
    display: flex;
  }
  .container {
    margin: 1em;
    flex: 1 0 auto;
    padding: 10px;
    border: 1px solid #ccc;
  }
  </style>
  